<template>
  <div class="roles-box">
        <el-card shadow="never">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }">权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card> 

        <div class="roles-table">
            <el-button type="primary" @click="addRolesFn">添加角色</el-button>
            <el-table
                :data="rolesList"
                border
                style="width: 100%">
                 <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-row v-for="(item, index) in props.row.children" :key="item.id" class="border-b" :class="index===0? 'border-t' :''">
                            <el-col :span="6">
                                <el-tag>{{item.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="18">
                                <el-row v-for="(item2, index) in item.children" :key="item2.id" :class="index!==0 ? 'border-t' :''">
                                    <el-col :span="6">
                                        <el-tag type="success">{{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <el-tag v-for="item3 in item2.children" :key="item3.id"  type="warning">{{item3.authName}}</el-tag>  
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column
                label="#"
                type="index">
                </el-table-column>
                <el-table-column
                prop="roleName"
                label="角色名称">
                </el-table-column>
                <el-table-column
                prop="roleDesc"
                label="角色描述">
                </el-table-column>
        
                <el-table-column
                 width="180"
                label="操作">
                    <template slot-scope="scoped">
                        <el-button size="small" type="primary" icon="el-icon-edit" @click="editRolesFn(scoped.row)"></el-button>
                        <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteRoles(scoped.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div> 

        <el-dialog title="添加角色" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
            <el-form :model="addRoles"  label-width="80px" :rules="addRules" ref="addRuleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="addRoles.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="addRoles.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRolesObj('addRuleForm')">确 定</el-button>
            </div>
        </el-dialog>   

        <el-dialog title="编辑角色" :visible.sync="editDialogFormVisible" :modal-append-to-body="false">
            <el-form :model="editRoles"  label-width="80px" :rules="editRules" ref="editRuleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="editRoles.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="editRoles.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editRolesObj('addRuleForm')">确 定</el-button>
            </div>
        </el-dialog>   
  </div>
</template>

<script>
export default {
    data() {
        return {
            rolesList: [],
            dialogFormVisible: false,
            editDialogFormVisible: false,
            addRoles: {
                roleName: '',
                roleDesc: ''
            },
            editRoles: {
                roleName: '',
                roleDesc: '',
                id: ''
            },
            addRules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                ],
                roleDesc: [
                    { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
                ]
            },
            editRules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                ],
                roleDesc: [
                    { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getRolesList()
    },
    methods: {
        async getRolesList() {
            const {data} =  await this.$http({
                method: 'GET',
                url: '/roles'
            })

            if(data.meta.status !== 200) {
                this.$message({
                    type: 'error',
                    message: data.meta.msg
                })
            }

            this.rolesList = data.data
        },
        deleteRoles(row) {
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(async () => {
                    const {data} = await this.$http({
                        method: 'DELETE',
                        url: `/roles/${row.id}`
                    })

                    if(data.meta.status !== 200) {
                        return this.$message({
                            type: 'error',
                            message: '删除失败'
                        })
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getRolesList()

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })        
                })
        },
        addRolesFn() {
            this.dialogFormVisible = true    
        },
        async addRolesObj() {
            const {data} = await this.$http({
                method: 'POST',
                url: '/roles',
                data: this.addRoles
            })

            if(data.meta.status !== 201) {
                return this.$message({
                    type:'error',
                    message: data.meta.msg
                })
            }
            this.dialogFormVisible = false
            this.getRolesList()   
        },
        editRolesFn(row) {
            this.editRoles.roleName = row.roleName
            this.editRoles.roleDesc = row.roleDesc
            this.editRoles.id = row.id

            this.editDialogFormVisible = true
        },
        async editRolesObj() {
            const {data} = await this.$http({
                method: 'PUT',
                url: `/roles/${this.editRoles.id}`,
                data: {
                    roleName: this.editRoles.roleName,
                    roleDesc: this.editRoles.roleDesc
                }
            })

            if(data.meta.status !== 200) {
                return this.$message({
                    type: 'error',
                    message: data.meta.msg
                })
            }
            this.$message({
                type: 'success',
                message: '修改成功'
            })
            this.editDialogFormVisible = false
            this.getRolesList()
            
        }
    }
}
</script>

<style scoped lang="less">
.roles-box {
    .roles-table{
        margin: 0;
        padding: 10px 20px;

        .el-row{
            display: flex;
            align-items: center;
            padding: 5px 0;
        }

        .border-b {
            border-bottom: 1px solid #ccc;
        }
        .border-t {
            border-top: 1px solid #ccc;
        }
        .el-tag{
            margin: 5px;
        }
        .el-table{
            margin-top: 10px;
        }

    }
}
</style>